<template>
    <el-dialog v-model="dialogTableVisible" title="资产记录" width="90%" height="80%">
        <!-- <el-form ref="form" :model="formData" label-width="80px" :inline="true">
            <el-form-item label="地址">
                <el-input v-model="formData.address" placeholder="请输入地址" style="width: 360px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form> -->
        <el-table ref="multipleTable" :data="list" v-loading="loading">
            <el-table-column prop="Id" width="60" label="#"> </el-table-column>
            <el-table-column prop="Address" label="用户地址" width="330">
            </el-table-column>
            <el-table-column prop="Status" label="类型" width="80">
                <template #default="scope">
                    {{ ['', '充值', "提币", "转入", "转出", "预约", "支付", "再预约", "收益", "团队奖", "管理奖", "平级奖"][scope.row.Status] }}
                </template>
            </el-table-column>
            <el-table-column prop="ChangeAmount" label="数量" width="80">
                <template #default="scope">
                    <span
                        :style="{ color: scope.row.ChangeAmount.indexOf('-') !== -1 ? '#38BFE4' : 'rgba(43, 221, 199, 1)' }">
                        {{ scope.row.ChangeAmount.indexOf('-') !== -1 ? "" : "+" }}{{ scope.row.ChangeAmount }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="AfterBalance" label="余额" width="80">
            </el-table-column>
            <el-table-column prop="CreatedAt" label="时间" min-width="160">
            </el-table-column>
        </el-table>
        <div class="right">
            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :page-size="formData.pageSize"
                :total="formData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </el-dialog>
</template>
<script setup>
import { reactive, ref, defineExpose } from 'vue'
import { getUSDTRecordList } from "@/api";
const dialogTableVisible = ref(false)
const formData = reactive({
    pageNum: 0,
    pageSize: 10,
    total: 0,
    address: ""
})
const loading = ref(false)
const list = ref([])
const onSubmit = async () => {
    loading.value = true
    try {
        const res = await getUSDTRecordList(formData);
        console.log(res)
        list.value = res.data.data.InvestList
        formData.total = res.data.data.Total;
        SumUSDT.value = res.data.data.SumUSDT
    } catch (error) { }
    loading.value = false
}
const handleSizeChange = (val) => {
    formData.pageSize = val;
    formData.pageNum = 0;
    onSubmit();
}
const handleCurrentChange = (val) => {
    formData.pageNum = val - 1;
    onSubmit();
}

const show = (item) => {
    dialogTableVisible.value = true;
    formData.address = item.Address;
    onSubmit();
}
defineExpose({
    show,
})
</script>
<style lang="scss" scoped>
.right {
    overflow: auto;
}

.el-pagination {
    padding: 15px;
    float: right;
}
</style>